var stage
$(document).ready(function(){					
	var canvas = document.getElementById('canvas');//画布
	stage = new JTopo.Stage(canvas);//舞台
	var scene = new JTopo.Scene(stage);//场景
	//显示工具栏 showJTopoToobar(stage);
	scene.background = './img/bg.jpg';//场景背景图片
	
	stage.add(scene);
	
	// 不指定布局的时候，容器的布局为自动(容器边界随元素变化）
    var container = new JTopo.Container('边界自动变化');//容器
    container.textPosition = 'Middle_Center';
    container.fontColor = '100,255,0';
    container.font = '18pt 微软雅黑';
    container.borderColor = '255,0,0';
    container.borderRadius = 30; // 圆角
    scene.add(container);
    
    for(var i=0; i<5; i++){
        var node = new JTopo.Node("A_"+i);    
        node.textPosition = "Middle_Center";
        node.setLocation(300+ Math.random() * 300, 200+ Math.random() * 200);
        scene.add(node);
        container.add(node);
    }
	
    scene.add(new JTopo.Link(container.childs[0], container.childs[1]));
	scene.add(new JTopo.Link(container.childs[2], container.childs[3]));
    
	// 流式布局（水平、垂直间隔均为10)
    var flowLayout = JTopo.layout.FlowLayout(10, 10);
    // 网格布局(4行3列)
    var gridLayout = JTopo.layout.GridLayout(4, 3);
    
    var container2 = new JTopo.Container('点击切换布局');
    container2.layout = flowLayout;
    container2.fillColor = '10,10,100';
    container2.setBound(10, 10, 300, 200);            
    scene.add(container2);
	
    for(var i=0; i<12; i++){
        var node = new JTopo.Node("F_" + i);    
        node.textPosition = "Middle_Center";
        scene.add(node);
        container2.add(node);
    }
	
    container2.click(function(){
        if(container2.layout === flowLayout){
            container2.layout = gridLayout;
        }else{
            container2.layout = flowLayout;
        }
    });
    
});
	